<template>
  <ul class="ratlist-ul__base">
    <li v-for="rate in ratings" :key="rate.username" class="ratlist-li__base">
      <div class="ratlist-div__title">
        <span class="ratlist-span__date">{{ rate.formateDate }}</span>
        <span class="ratlist-span__user"
          ><span class="ratlist-span__username">{{ rate.username }}</span>
          <img class="ratlist-span__avatar" :src="rate.avatar"
        /></span>
      </div>
      <p class="ratlist-div__comment">
        <i
          class="ratlist-div__icon"
          :class="rate.rateType === 0 ? 'icon-thumb_up' : 'icon-thumb_down'"
          :style="{
            color:
              rate.rateType === 0 ? 'rgb(0,160,220)' : 'rgb(147, 153, 159)',
          }"
        ></i
        >{{ rate.text || "该用户暂无留下文字评论。" }}
      </p>
    </li>
    <li class="ratlist-li__base ratlist-li__last" v-show="requireEndText">
      再怎么往下滚也没有啦~
    </li>
  </ul>
</template>
<script lang="ts">
import { defineComponent, PropType, nextTick } from "@vue/composition-api";
import { formatDate } from "./../../common/util/tool";
import Vue from "vue";
// 用户评价接口
interface UserRating {
  avatar: string;
  rateTime: number;
  rateType: number;
  text: string;
  username: string;
}
// 用户评价含日期接口
interface UserRatingWithDate extends UserRating {
  formateDate: string;
}
export default defineComponent({
  props: {
    ratings: {
      type: Array as PropType<UserRating[]>,
      default: [],
    },
    requireEndText: {
      type: Boolean,
      default: true,
    },
  },
  setup(props, context) {
    // 完成组件加载事件
    nextTick(() => {
      context.emit("list-loaded");
    });
    // 初始化日期渲染数据
    props.ratings.forEach((rate: UserRating) => {
      Vue.set(
        rate,
        "formateDate",
        formatDate(new Date(rate.rateTime), "YYYY-MM-DD hh:mm")
      );
    });
    // return {};
  },
});
</script>
<style lang="stylus" scoped>
$avatar-height = 12px;
$title-fontsize = 10px;
$title-color = rgb(147, 153, 159);
$title-lineheight = 12px;
$comment-fontsize = 12px;
$comment-lineheight = 12px;
$comment-color = rgb(7, 17, 27);

.ratlist-ul__base {
  margin: 0 18px;
}

.ratlist-li__last {
  color: $title-color;
  font-size: $comment-fontsize;
  line-height: $comment-lineheight;
  text-align: center;
}

.ratlist-li__base {
  padding: 16px 0px;
  position: relative; // 相对定位

  .ratlist-div__title {
    padding-bottom: 10px;
    font-size: $title-fontsize;
    color: $title-color;
    line-height: $title-lineheight;
    display: flex;
    justify-content: space-between;

    .ratlist-span__username {
      margin-right: 6px;
      vertical-align: top;
    }

    .ratlist-span__avatar {
      width: $avatar-height;
      height: $avatar-height;
      border-radius: 50%;
    }
  }

  .ratlist-div__icon {
    margin-right: 6px;
  }

  .ratlist-div__comment {
    color: $comment-color;
    font-size: $comment-fontsize;
    line-height: $comment-lineheight;
  }

  // 下划线
  &::after {
    content: '';
    position: absolute; // 绝对定位
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background-color: rgba(7, 17, 27, 0.1);
  }

  // 最后一个子元素无下划线
  &:last-child::after {
    display: none;
  }

  // 媒体查询兼容
  @media (-webkit-device-pixel-ratio: 2), (-webkit-max-device-pixel-ratio: 2), (-webkit-min-pixel-ratio: 2) {
    &::after {
      transform: scaleY(0.5);
    }
  }
}
</style>
